---
id: tooltip
title: Tooltip
---

import { IconsStyle } from "@site/src/components/Docs_Icons";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";
import { BiInfoCircle } from "react-icons/bi";
import Usage from "../component_usage/Tooltip.mdx";

<IconsStyle />

Tooltips display informative text when users tap on an element.

<div class="row inline-flex-center">
  <div class="col col--3">
    <h4>Import</h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`import { Tooltip } from '@rneui/themed';`}</CodeBlock>
  </div>
  <div class="col col--3">
    <h4>
      Theme Key{" "}
      <a href="../customizing#using-themeprovider">
        <BiInfoCircle />
      </a>
    </h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`Tooltip`}</CodeBlock>
  </div>
</div>

## Usage

### Example

```tsx live
function RNETooltip() {
  const [open, setOpen] = React.useState(false);
  return (
    <Stack row align="center">
      <Tooltip
        visible={open}
        onOpen={() => setOpen(true)}
        onClose={() => setOpen(false)}
        popover={<Text style={{ color: "#fff" }}>Tooltip text</Text>}
      >
        Click me
      </Tooltip>
    </Stack>
  );
}
```

<Usage />

## Props

<div class='table-responsive'>

| Name                       | Type                                                       | Default       | Description                                                                                                                                                                                                                                             |
| -------------------------- | ---------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ModalComponent`           | typeof Component                                           |               | Override React Native `Modal` component (usable for web-platform).                                                                                                                                                                                      |
| `animationType`            | `none` \| `fade`                                           | `fade`        |                                                                                                                                                                                                                                                         |
| `backgroundColor`          | ColorValue                                                 | `#617080`     | Sets backgroundColor of the tooltip and pointer.                                                                                                                                                                                                        |
| `closeOnlyOnBackdropPress` | boolean                                                    | `false`       | Flag to determine whether to disable auto hiding of tooltip when touching/scrolling anywhere inside the active tooltip popover container. When `true`, Tooltip closes only when overlay backdrop is pressed (or) highlighted tooltip button is pressed. |
| `containerStyle`           | View Style                                                 | `{}`          | Passes style object to tooltip container                                                                                                                                                                                                                |
| `height`                   | number                                                     | `40`          | Tooltip container height. Necessary in order to render the container in the correct place. Pass height according to the size of the content rendered inside the container.                                                                              |
| `highlightColor`           | ColorValue                                                 | `transparent` | Color to highlight the item the tooltip is surrounding.                                                                                                                                                                                                 |
| `onClose`                  | Function                                                   | `Function`    | Function which gets called on closing the tooltip.                                                                                                                                                                                                      |
| `onOpen`                   | Function                                                   | `Function`    | Function which gets called on opening the tooltip.                                                                                                                                                                                                      |
| `overlayColor`             | ColorValue                                                 | `#fafafa14`   | Color of overlay shadow when tooltip is open.                                                                                                                                                                                                           |
| `pointerColor`             | ColorValue                                                 | `#617080`     | Color of tooltip pointer, it defaults to the [`backgroundColor`](#backgroundcolor) if none is passed.                                                                                                                                                   |
| `pointerStyle`             | View Style                                                 |               | Style to be applied on the pointer.                                                                                                                                                                                                                     |
| `popover`                  | `ReactElement<{}, string` \| `JSXElementConstructor<any>>` |               | Component to be rendered as the display container.                                                                                                                                                                                                      |
| `skipAndroidStatusBar`     | boolean                                                    | `false`       | Force skip StatusBar height when calculating element position. Pass `true` if Tooltip used inside react-native Modal component.                                                                                                                         |
| `toggleAction`             | string                                                     | `onPress`     | Define type of action that should trigger tooltip. Available options _onPress_, _onLongPress_                                                                                                                                                           |
| `toggleOnPress`            | boolean                                                    | `true`        | Flag to determine to toggle or not the tooltip on press.                                                                                                                                                                                                |
| `visible`                  | boolean                                                    | `false`       | To show the tooltip.                                                                                                                                                                                                                                    |
| `width`                    | number                                                     | `150`         | Tooltip container width. Necessary in order to render the container in the correct place. Pass height according to the size of the content rendered inside the container.                                                                               |
| `withOverlay`              | boolean                                                    | `true`        | Flag to determine whether or not display overlay shadow when tooltip is open.                                                                                                                                                                           |
| `withPointer`              | boolean                                                    | `true`        | Flag to determine whether or not to display the pointer.                                                                                                                                                                                                |

</div>
